<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>童圈</title>
		<link href="../../../css/style.css" rel="stylesheet" type="text/css">
		<link href="../../../css/mui.min.css" rel="stylesheet" type="text/css">
		<style>
			body,ul,li,span,nav,i,b,a,div, dl, dt, dd, ol,  h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, button{ 
				  margin:0; padding:0; font-family:SourceHanSans-Regular;list-style:none; text-decoration: none;
				}
				.playbtn img {
				position: absolute;
				width: 1rem; 
				left: 1.5rem!important;
				top: 50%;
				margin-top: -0.5rem; 
			}
			.videoWidth{
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div id="children">
			<!--消息列表-->
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper list-frame" style="background: #fff;">
				<div class="mui-scroll">
			<div class="list-frame" id="list">
				<ul class="list-info">
					<template v-for="(item,index) in items" :key="index">
						<li class="list-info-li">
							<div class="main clearfix">
								<div :style="{backgroundImage:'url(' + item.member_avatar + ')'}" class="people-l fl"></div>
								<!--img :src="item.member_avatar" class="people-l fl" /-->
								<div class="list-info-li-r fl">
									<div class="name posir">
										<div class="name-text">{{item.member_name}}</div>
									</div>
									<!--消息内容-->
									<div class="text-info">
										<p class="text overhide word-long fold">{{item.content}}</p>
										<p class="all" v-if="item.content.length>95" @click='handleFold($event)' onclick="javascript:this.innerHTML=(this.innerHTML=='全文'?'收起':'全文');">全文</p>
									</div>
									<!--1.单图2.多图3.视频4.图文5.其他-->
									<div class="list-info-pic" v-if="item.type==1">
										<img :src="item.message_image" class="imgWidth" @tap="previewimg(item.message_image,0)" />
									</div>
									<div class="list-info-pic clearfix" v-if="item.type==2">
										<div :style="{backgroundImage:'url(' + pic + ')'}" class="list-ip-img2 list-info-picBackground fl" v-for="(pic,index) in item.message_image" @tap="previewimg(item.message_image,index)">
											<!--img :src="pic" class="list-ip-img2 fl" v-for="(pic,index) in item.message_image" @tap="previewimg(item.message_image,index)"/-->
										</div>
									</div>
									<div class="clearfix clearfixvideo" v-if="item.type==3" style="width: 4rem;position: relative;"> 
										<video :src="item.video" class="videoWidth" :poster="item.videoimg" type="video/mp4">
										</video>
										<div class="playbtn"><img src="../../../images/play.png"/></div> 
									</div>
									<div class="list-info-li-tuwen clearfix" v-if="item.type==4" @tap="open_detail(item.link,item.title)">
										<div class="list-info-li-tuwenBackground" :style="{backgroundImage:'url(' + item.pic + ')'}"></div>
										<!--img :src="item.pic" /-->
										<div class="list-info-li-tuwenContent fl"><div><span :class="item.title.length>18 ? 'p1' : 'p2' ">{{item.title}}</span></div></div>
									</div>
									<div class="list-info-pic clearfix" v-if="item.type==5">
									</div>
									<!--操作按钮-->
									<div class="fabulous clearfix">
										<div class="text fl">{{item.ftime}}</div>
										<div class="fr">
												<span class="mui-icon iconfont icon-collection_fill" @tap="savetofav(index,item)"></span>
										</div>
									</div>
								</div>
							</div>
						</li>
					</template>
				</ul>
			</div>
			</div>
			</div>
		</div>
		<!--轮播banner-->
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/vue.min.js"></script>
		<script src="../../../js/app.js"></script>
		<script src="../../../js/token.js"></script>
		<script src="../../../js/iconfont.js"></script>
		<script src="../../../js/jquery-1.8.3.min.js"></script>
		<script>
			var favoritestatus = 0; //收藏按钮状态，避免快速点击
			var state = app.getState();
			var memberToken = state.memberToken;
			var pages=1;
			//mui初始化，配置下拉刷新
			//mui初始化，配置下拉刷新
			mui.init({
					gestureConfig: {
						doubletap: true,
						longtap: true, //默认为false 
						click: true
					},
					pullRefresh: {
						container: '#pullrefresh',
						down: {
							callback: function() {
								pages = 1
								pulldownRefresh(pages)
							}
						},
						up: {
							contentrefresh: '正在加载...',
							callback: function() {
								pages++;
								pullupRefresh(pages)
							}
						}
					}
				});

			mui.plusReady(function() {
				data = {
					uid: state.userid,
					memberToken: memberToken,
					page:1
				};
				mui('#list').on('tap','.playbtn',function(){
					this.previousElementSibling.play();
					this.style.display='none';
					this.previousElementSibling.addEventListener('ended',function(){
							this.nextElementSibling.style.display='block';
						})
				})
				mui('#list').on('tap','.videoWidth',function(){
					this.pause(); 
					this.nextElementSibling.style.display='block';
				})
				mui.post(Apiurl+'index/colllist_new', data, function(data) {
					if(data.message && data.message.length > 0) {
						pullrefresh.items = convert(data.message)
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				}, 'json');
			});

			var pullrefresh = new Vue({
				el: '#pullrefresh',
				data: {
					banners: [], //顶部banner数据
					items: [], //列表信息流数据
					fold: true,
					clickTf: true,
					activeindex: 0
				},
				methods: {
					//图片预览
					previewimg: function(item, index) {
						var urls = [];
						item.forEach(function(img) {
							urls.push(img);
						});

						plus.nativeUI.previewImage(urls, {
							current: index,
							loop: true,
							indicator: 'number'
						});
					},
					//全文/收起
					handleFold: function(e) {
						if(e.srcElement.previousElementSibling.getAttribute('class') == 'text overhide word-long fold') {
							e.srcElement.previousElementSibling.setAttribute('class', 'text overhide word-long unfold')
						} else {
							e.srcElement.previousElementSibling.setAttribute('class', 'text overhide word-long fold')
						}

					},
					//取消收藏
					savetofav: function(index, item) {
						var data = {
							uid: state.userid,
							message_id: item.id,
							memberToken: memberToken
						};
						that = this;
						mui.post(Apiurl+'index/coll', data, function(data) { 
                		if(data.status == "200") {  
                			that.items.splice(index, 1);
                			plus.nativeUI.toast('取消成功', {
								verticalAlign: 'middle'
							});
							
							mui.fire(plus.webview.getWebviewById('momentsrefresh'),'refreshmomentcoll',{
								msgid:item.id 
							})
                		}
                		}, 'json')								
					}
				}
			});

			//下拉刷新
			function pulldownRefresh(pages) {
				if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
					plus.nativeUI.toast('似乎已断开与互联网的连接', { 
						verticalAlign: 'top'
					});
					return; 
				}
				data.page=pages
				
				//获取消息列表
				mui.post(Apiurl+'index/colllist_new', data, function(data) {
					if(data.message && data.message.length > 0) {
						pullrefresh.items = convert(data.message)
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				}, 'json');
			}
			//上拉加载 
			function pullupRefresh(pages) {
				data.page=pages;
				//请求历史列表信息流
				mui.post(Apiurl+'index/colllist_new', data, function(data) {
					if(pages <= data.pagecount){
						if(data.message && data.message.length > 0) {
							pullrefresh.items = pullrefresh.items.concat(convert(data.message));
						}
					}
					mui('#pullrefresh').pullRefresh().endPullupToRefresh();
				}, 'json');
			}
			
			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						uid: state.userid,
						id: item.id,
						member_avatar: item.member_avatar,
						member_name: item.member_name,
						member_id: item.member_id,
						message_image: item.message_image,
						pic: item.pic,
						title: item.title,
						content: item.content,
						link: item.link,
						coll: item.coll,
						type: item.type,
						ftime: item.ftime,
						upvote_count:item.upvote_count,
						upvote:item.upvote,
						upvote_status:item.upvote_status,
						comment:item.comment,
						video:item.video,
						comment_count:item.comment_count,
						videoimg:item.videoimg
					});
				});
				return newItems;
			}

			
		</script>
	</body>

</html>